<template>
	<u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
		:safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
		<view class="u-datetime-picker">
			<view class="u-picker-header" @touchmove.stop.prevent="">
				<view class="u-btn-picker u-btn-picker--tips" style="color:#606266" hover-class="u-opacity"
					:hover-stay-time="150" @tap="getResult('cancel')">取消</view>
				<view class="u-picker__title"></view>
				<view class="u-btn-picker u-btn-picker--primary" style="color:#2979ff" hover-class="u-opacity"
					:hover-stay-time="150" @touchmove.stop="" @tap.stop="getResult('confirm')">
					确定
				</view>
			</view>
			<view class="u-picker-body">
				<picker-view :value="pickerIndex" @change="pickerViewChangeThree" class="u-picker-view"
					@pickstart="pickstart" @pickend="pickend">
					<picker-view-column>
						<view class="u-column-item" v-for="(item, index) in pickerList" :key="index">
							<view class="u-line-1">{{ item.name }}</view>
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="u-column-item" v-for="(item, index) in pickerList[pickerIndex[0]].children"
							:key="index">
							<view class="u-line-1">{{ item.name }}</view>
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="u-column-item"
							v-for="(item, index) in pickerList[pickerIndex[0]].children[pickerIndex[1]].children"
							:key="index">
							<view class="u-line-1">{{ item.name }}</view>
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	// mode所有类型
	let pickerModeArray = ["one", "two_linkage", "two_nolinkage", "three"];

	export default {
		name: "area-picker",
		props: {
			safeAreaInsetBottom: {
				type: Boolean,
				default: false
			},
			// 通过双向绑定控制组件的弹出与收起
			value: {
				type: Boolean,
				default: false
			},
			// 是否允许通过点击遮罩关闭Picker
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			areaId: {
				type: Number,
				required: true,
			},
			// 默认picker选中项索引
			defaultIndex: {
				type: Array,
				required: true,
				validator: (value) => {
					if (value.length > 0 && value.length <= 3) {
						return true;
					}
					return false;
				}
			}
		},
		data() {
			return {
				pickerIndex: [0, 0, 0], // picker索引值
				pickerShow: false,
				provinceKey: -1, //省份id
				cityKey: -1, //市id
				areaKey: -1, //区域id
				selectedData: [],
				pickerList: [],
				province: [],
			};
		},
		computed: {
			uZIndex() {
				// 如果用户有传递z-index值，优先使用
				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
			}
		},
		created() {
			this.init();
		},
		watch: {
			// 匹配选中索引
			mode() {
				this.pickerIndex = this.defaultIndex;
			}
		},
		methods: {
			// 标识滑动开始，只有微信小程序才有这样的事件
			pickstart() {
				// #ifdef MP-WEIXIN
				this.moving = true;
				// #endif
			},
			// 标识滑动结束
			pickend() {
				// #ifdef MP-WEIXIN
				this.moving = false;
				// #endif
			},
			close() {
				this.$emit('input', false);
			},
			init() {

				//没有地区信息时，再拉一次
				if (!this.$db.get('areaList')) {
					//获取地区信息
					this.$api.getAreaList({}, res => {
						if (res.code == 200) {
							this.$db.set('areaList', res.data)
							this.province = this.$db.get("areaList");
							this.pickerList = this.$db.get("areaList");

						}
					});
				} else {

					this.province = this.$db.get("areaList");
					this.pickerList = this.$db.get("areaList");

				}
				//查找省市区 id
				this.getFullPath(this.areaId, this.province);
				// this.pickerIndex = [this.provinceKey,this.cityKey,this.areaKey];
			},
			//倒查城市信息
			getFullPath(id, data) {
				for (var i = 0; i < data.length; i++) {
					if (id == data[i].id) {
						if (!data[i].children) {
							this.areaKey = i;
							return true;
						} else if (data[i].hasOwnProperty("children")) {
							if (data[i].children[0] && !data[i].children[0].children) {
								this.cityKey = i;
								return true;
							} else {
								this.provinceKey = i;
								return true;
							}
						}
					} else {
						if (data[i].hasOwnProperty("children")) {
							if (data[i].children[0] !== undefined) {
								if (data[i].children[0].hasOwnProperty("children")) {
									this.provinceKey = i;
								} else {
									this.cityKey = i;
								}
							}
							if (typeof data[i].children != 'undefined') {
								var res = this.getFullPath(id, data[i].children);
								if (res) {
									return true;
								}
							}
						}
					}
				}
			},
			// 三列联动选项变化
			pickerViewChangeThree(e) {
				let changeValue = e.detail.value;

				// 超规处理
				if (this.pickerList[changeValue[0]].children.length - 1 < changeValue[1]) {
					changeValue[1] = this.pickerList[changeValue[0]].children.length - 1;
				}
				if (this.pickerList[changeValue[0]].children[changeValue[1]].children.length - 1 < changeValue[2]) {
					changeValue[2] = this.pickerList[changeValue[0]].children[changeValue[1]].children.length - 1;
				}
				this.pickerIndex = changeValue;
			},
			// 用户点击确定按钮
			getResult(event = null) {
				// #ifdef MP-WEIXIN
				if (this.moving) return;
				// #endif
				let result = {};
				// 只返回用户在this.params中配置了为true的字段
				this.selectedData = [{
						id: this.province[this.pickerIndex[0]].id,
						name: this.province[this.pickerIndex[0]].name,
					},
					{
						id: this.province[this.pickerIndex[0]].children[this.pickerIndex[1]].id,
						name: this.province[this.pickerIndex[0]].children[this.pickerIndex[1]].name,
					},
				];
				if (this.province[this.pickerIndex[0]].children[this.pickerIndex[1]].children[this.pickerIndex[
						2]] && this.province[this.pickerIndex[0]].children[this.pickerIndex[1]].children[this.pickerIndex[
						2]].id) {
					let items = {
						id: this.province[this.pickerIndex[0]].children[this.pickerIndex[1]].children[this.pickerIndex[
							2]].id,
						name: this.province[this.pickerIndex[0]].children[this.pickerIndex[1]].children[this
							.pickerIndex[2]].name,
					}
					this.selectedData.push(items)
				}
				this.$emit("onConfirm", this.selectedData);
				this.close();
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../uview-ui/libs/css/style.components.scss';

	.u-datetime-picker {
		position: relative;
		z-index: 999;
	}

	.u-picker-view {
		height: 100%;
		box-sizing: border-box;
	}

	.u-picker-header {
		width: 100%;
		height: 90rpx;
		padding: 0 40rpx;
		@include vue-flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		font-size: 30rpx;
		background: #fff;
		position: relative;
	}

	.u-picker-header::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.u-picker__title {
		color: $u-content-color;
	}

	.u-picker-body {
		width: 100%;
		height: 500rpx;
		overflow: hidden;
		background-color: #fff;
	}

	.u-column-item {
		@include vue-flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: $u-main-color;
		padding: 0 8rpx;
	}

	.u-text {
		font-size: 24rpx;
		padding-left: 8rpx;
	}

	.u-btn-picker {
		padding: 16rpx;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
	}

	.u-opacity {
		opacity: 0.5;
	}

	.u-btn-picker--primary {
		color: $u-type-primary;
	}

	.u-btn-picker--tips {
		color: $u-tips-color;
	}
</style>